<script setup>
//接收user传过来的数据
import getDate from '@/utils/dateChange.js'
import { ref, watch } from 'vue'
import useRoleStore from '@/store/role/index.js'

const roleStore = useRoleStore()

//定义user数据接收器
defineProps({
  roleList: {
    type: Array,
    default: () => []
  }
})

//定义分页器
const page = ref(1)
const size = ref(10)

//size大小切换
const handleSizeChange = () => {
  roleStore.getRoleListAction(page.value, size.value)
}

//当前页切换
const handleCurrentChange = () => {
  roleStore.getRoleListAction(page.value, size.value)
}

//删除用户
const deleteBtn = async (roleId) => {
  await roleStore.deleteRoleAction(roleId)
  roleStore.getRoleListAction(page.value, size.value)
}

//批量删除用户
const ids = ref()
const handleSelectionChange = (userIds) => {
  ids.value = userIds.map((item) => item.userId)
}

//批量删除
const deleteBatchBtn = async () => {
  await loginStore.removeBatchUserByUserIdsAction(ids)
  loginStore.getUserListInfoAction(page.value, size.value)
}

//批量按钮禁用
const isDisabled = ref(true)
watch(ids, (newValue, oldValue) => {
  if (newValue.length > 0) {
    isDisabled.value = false
  } else {
    isDisabled.value = true
  }
})

//新增
const dialogVisibleShow = ref(false)
const $emits = defineEmits(['dialogVisibleEmits', 'dialogUpdateVisibleEmits'])
const addBtn = () => {
  dialogVisibleShow.value = true
  $emits('dialogVisibleEmits', dialogVisibleShow.value)
}

//修改信息
const dialogEditBtn = (value) => {
  dialogVisibleShow.value = true
  $emits('dialogUpdateVisibleEmits', dialogVisibleShow.value, value)
}
</script>

<template>
  <div class="content">
    <div class="header">
      <el-button @click="addBtn" type="primary" plain>
        <el-icon>
          <Plus />
        </el-icon>
        <span>新增</span>
      </el-button>
      <el-popconfirm @confirm="deleteBatchBtn" title="确定要批量删除吗?">
        <template #reference>
          <el-button :disabled="isDisabled" type="danger" plain>
            <el-icon>
              <Delete />
            </el-icon>
            <span>批量删除</span>
          </el-button>
        </template>
      </el-popconfirm>
    </div>

    <!--    表格内容-->
    <el-table
      @selection-change="handleSelectionChange"
      ref="tableRef"
      :data="roleList"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" property="roleId" label="角色编号" />
      <el-table-column align="center" property="roleName" label="角色名称" />
      <el-table-column align="center" property="roleKey" label="权限字符" />
      <el-table-column align="center" property="status" label="状态">
        <template #default="scope">
          <el-button :type="scope.row.status ? 'primary' : 'danger'" plain>
            {{ scope.row.status ? '启用' : '禁用' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" property="createTime" label="创建时间">
        <template #default="scope">
          {{ getDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button type="primary" text="primary" @click="dialogEditBtn(scope.row)"
            >修改
          </el-button>
          <el-popconfirm @confirm="deleteBtn(scope.row.roleId)" title="确定要删除吗?">
            <template #reference>
              <el-button type="danger" text="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器      -->
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="roleStore.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped lang="less">
.content {
  padding: 0 15px 0 15px;

  .header {
    margin-bottom: 10px;
  }

  .el-pagination {
    margin-top: 20px;
  }
}
</style>
